<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">渠道查询</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="姓名:">
                        <el-input v-model.trim="searchObj.name" clearable placeholder="" size='small' style="width:150px;"/>
                    </el-form-item>
                    <el-form-item label="渠道名称:">
                        <el-input v-model.trim="searchObj.channelName" clearable placeholder="" size='small' style="width:180px;"/>
                    </el-form-item>
                    <el-form-item label="手机号:">
                        <el-input v-model.trim="searchObj.mobile" clearable placeholder="" size='small' style="width:180px;"/>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="searchObj.status" @change="selectChange" size='small' placeholder="" style="width: 130px">
                            <el-option label="全部" value="-1" />
                            <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                        </el-select>                
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增渠道</el-button>
                    </el-form-item>
                </el-form>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中" border>
                    <el-table-column type='index' width='70' label="编号"/>
                    <el-table-column prop="channelName" label="渠道名称"/>
                    <el-table-column prop="mobile" label="账号"/>
                    <el-table-column prop="passWord" label="密码"/>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span :class="statusMap[scope.row.status]== '下线'?'color-red':''">
                                {{statusMap[scope.row.status]}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" class-name="second-btn">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" @click="upDownline(scope.row)">{{scope.row.status == 1 ? '下线': '上线'}}</el-button>
                            <el-button type="primary" size="mini" @click="addeditDailog('edit',scope.row)">编辑</el-button>
                            <!-- <el-button type="danger" size="mini" @click="deleteData(scope.$index,scope.row.autoId)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='false' :visible.sync="dialogFormVisible" width="50%" @close="closeDailog">
                    <el-form label-width="130px">
                        <el-form-item label="渠道名称:">
                            <el-input v-model.trim="dailogFrom.channelName" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="渠道负责人:">
                            <el-input v-model.trim="dailogFrom.name" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                        <!-- <el-form-item label="结算方式:">
                            <el-select v-model="dailogFrom.aaa" style="width:150px;" placeholder="请选择结算方式">
                                <el-option label="UV" value='1'/>
                                <el-option label="UA" value='2'/>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="账号:">
                            <el-input v-model.trim="dailogFrom.mobile" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="密码:">
                            <el-input v-model.trim="dailogFrom.passWord" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="邮箱:">
                            <el-input v-model.trim="dailogFrom.mail" placeholder="" size='small' style="width:200px;"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {
                status:"-1"
            }, //查询参数
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数

            statusMap: {
                "1": "上线",
                "0": "下线"
            },

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",
            dailogFrom: {},

            appData: [], //产品列表
            selectDisabled: false
        };
    },
    watch: {
        dialogType() {
            if (this.dialogType === "add") {
                this.dialogTitle = "新增";
            } else {
                this.dialogTitle = "编辑";
                this.selectDisabled = true;
            }
        }
    },
    methods: {
        init(){
            this.dailogFrom = {
                channelName:'',
                name:'',
                mobile:'',
                mail:'',
                // status:1,

                // autoId:0,
                // passWord:'',
                // adminId:0,
                // lastLoginTime:'1970-01-01 00:00:00',
            }
        },
        // 点击查询
        onSubmit() {
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        selectChange() {
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.getFlowChannelList({
                ...this.searchObj,
                pageNum: this.currentPage
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.list;
                    this.pageCount = res.data.pages;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },

        // 查询产品列表
        getAppList() {
            api.getProductInfoList({
                pageSize: 1000
            }).then(res => {
                this.appData = res.data.list;
            });
        },

        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
                this.init();
            } else {
                this.dialogType = "edit";
                this.dailogFrom = Object.assign({}, rowData);
                // for (const key in rowData) {
                //     if (rowData[key] !== null) {
                //         this.dailogFrom[key] = rowData[key].toString();
                //     }
                // }
            }
            this.dialogFormVisible = true;
        },
        // 上下线操作
        upDownline(row) {
            const statusStr = row.status === 1 ? "下线" : "上线";
            this.$confirm(`确定${statusStr}该渠道吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    const postObj = {
                        ...row,
                        status: row.status === 1 ? 0 : 1
                    };
                    console.log(postObj);
                    api.updateFlowChannelInfo(postObj).then(res => {
                        this.$message.success("操作成功!");
                        // 获取数据列表
                        this.getDataList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },

        //删除产品
        deleteData(index, autoId) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    console.log("delete");
                    api.deleteOperationResources({
                        autoId: autoId
                    }).then(res => {
                        // 改变页面显示
                        this.tableData.splice(index, 1);
                        // 重新请求列表
                        // this.getDataList();
                        // 提示成功
                        this.$message.success("删除成功!");
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },

        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.init();
        },

        // 新增/编辑 确定
        confirm() {            
            if (!this.dailogFrom.channelName) {
                this.$message.error("请输入渠道名称!");
                return false;                
            }
            if (!this.dailogFrom.name) {
                this.$message.error("请输入联系人名称!");
                return false;                
            }
            if (!this.dailogFrom.mobile) {
                this.$message.error("请输入手机号!");
                return false;                
            }
            // if (!this.dailogFrom.mail) {
            //     this.$message.error("请输入邮箱!");
            //     return false;                
            // }
            if (this.dialogType === "add") {
                // 添加数据
                this.addData();
            } else if (this.dialogType === "edit") {
                // 更新数据
                this.updateData();
            }
        },

        // 添加数据
        addData() {
            api.addFlowChannel(this.dailogFrom).then(() => {
                this.$message.success("新增成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        },
        // 更新数据
        updateData() {
            api.updateFlowChannelInfo(this.dailogFrom).then(() => {
                this.$message.success("更新成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 查询产品列表
        // this.getAppList();
        // 查询数据列表
        this.getDataList();
    }
};
</script>

<style>
</style>
